$(function () {


    ajax('http://api.douban.com/v2/movie/coming_soon?start=0&count=20');//首次页面加载时

    var lis = $(".movieNavBar>li");
    for(var i = 0; i < lis.length; i++){
        var li = lis[i];
        $(li).on("click",function(){
            var currentUrl = $(this)[0].id;
            for(var j = 0; j < lis.length; j++){
                $(lis[j]).removeClass("active");
            }
            $(this).addClass("active");
            //每次点击按钮时
           ajax('http://api.douban.com/v2/movie/'+currentUrl+'?start=0&count=20')

        });


    }

    //当屏幕尺寸改变时，调用获取屏幕宽度方法，判断屏幕小于768px，给dym-dl加上col-xs-6类名
    window.onresize=function(){

        var screenWidth = getScreenWidth();
        if(screenWidth <= 768){
            $(".dym-dl").addClass("col-xs-6");

        }else{
            $(".dym-dl").removeClass("col-xs-6");
        }

        ajax('http://api.douban.com/v2/movie/coming_soon?start=0&count=20');
    }


    function ajax(url){
        $.ajax({

            type: 'get',
            //url: 'http://api.douban.com/v2/movie/'+currentUrl+'?start=0&count=20',//即将上映的电影
            //url:'http://api.douban.com/v2/movie/in_theaters?start=0&count=10',//正在上映
            //url:'http://api.douban.com/v2/movie/top250?start=0&count=10',//top250
            //url:'http://api.douban.com/v2/movie/subject/1292052',//获取某个id的详细信息
            url:url,
            dataType: 'jsonp',
            beforeSend:function(){
                var screenWidth = getScreenWidth();
                if(screenWidth <= 768){
                    $(".dym-dl").addClass("col-xs-6");
                }
            },
            success: function (data) {
                var subjects = data.subjects;//获取所有电影数组
                var parents = $(".dym-dl");
                for(var n = 0; n < parents.length; n++){
                    parents[n].innerHTML = '';
                }

                if(parents.hasClass('col-xs-6')){
                    for (var m = 0; m < subjects.length; m += 2) {//因为每次循环都会放两条数据所以m+=2

                        setMovies(subjects,m,parents,2);
                    }
                }else{
                    for (var m = 0; m < subjects.length; m += 4) {
                        setMovies(subjects,m,parents,4,subjects[m].id);
                    }
                }

            },
            error: function (err) {
                console.log(err);
            }

        });
    }


    //获取屏幕宽度返回值为数字类型
    function getScreenWidth(){
      return  document.body.clientWidth;
    }


   //设置页面上电影列表显示方式
    //参数：从豆瓣网获取的数据，m为每一条数据，parents为要放置内容的父元素，count为有几列
    function setMovies(subjects,m,parents,count){
        for(var h = 0; h < count; h++){
            if(subjects[m + h]){
                var div = document.createElement("div");
                var img = document.createElement("img");
                var  p = document.createElement("p");
                img.src = subjects[m + h].images.large;
                p.innerHTML = subjects[m+h].title;
                var mask = document.createElement("div");
                div.style.position = 'relative';
                var link = document.createElement("a");
                link.innerHTML = subjects[m+h].title;
                link.target = '_blank';
                var id = subjects[m + h].id;
                link.onclick=function(id){
                    var movieId = id;
                    return function(){
                        location.href = '../subHtml/movieDetail.html';
                        localStorage.movieId = movieId;

                    }
                }(id);

                mask.className = 'mask';
                mask.appendChild(link);
                div.appendChild(img);
                div.appendChild(p);
                div.appendChild(mask);
                parents[h].appendChild(div);
                maskSlide(div);
            }
        }
    }



    //当鼠标放在mask盒子上时
    function maskSlide(obj){
        $(obj).on("mouseover",function(){
            $(this).children(".mask").stop().slideDown(500);
        })
        $(obj).on("mouseout",function(){
            $(this).children(".mask").stop().slideUp(1000);
        })
    }

    $(document).snowfall('clear');
    $(document).snowfall({
        image: "../images/huaban.png",
        flakeCount: 30,
        minSize: 5,
        maxSize: 22
    });
})
